<template>
  <div class="content">
    <div class="title">考前密卷</div>
    <div v-for="(ele, index) in cardList" :key="index" class="content-item">
      <div v-if="ele.subhead !== 'null'" class="subtitle">
        {{ ele.subhead }}
      </div>
      <div class="grid-container">
        <div class="card" v-for="(item, index) in ele.children" :key="index" @click="toPractice(item)">
          <div class="card-icon">
            <span class="icon-text">密</span>
          </div>
          <div class="card-content">
            <div class="card-title">{{ item.name }}</div>
          </div>
          <div class="card-number">{{ item.questionCount }}题</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getQuestionInfo } from '@/api/userApi'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/store/user'

const router = useRouter()
const cardList = ref<any>([])
const userStore = useUserStore()

const fetchQuestionInfo = async () => {
  try {
    const res = await getQuestionInfo({
      categoryIds: userStore.categoryId,
      carIds: userStore.storeInfo.carModelId,
      pageUrlType: '07',
      pageSize: 100,
      pageNum: 1,
      status: 1
    })
    if (res.code === '00000') {
      // 假设返回的数据格式与 cardList 相同
      const children = res.data.list[0].children || []
      const grouped: Record<string, any[]> = {}
      children.forEach((item: any) => {
        const key = item.subhead
        if (!grouped[key]) {
          grouped[key] = []
        }
        grouped[key].push(item)
      })
      const arr = Object.keys(grouped).map(subhead => ({
        subhead,
        children: grouped[subhead]
      }))
      // 转为数组，每组为一个对象，包含subhead和children
      cardList.value = [
        ...arr.filter(item => item.subhead === '' || item.subhead === null),
        ...arr.filter(item => item.subhead !== '' && item.subhead !== null)
      ]
    } else {
      // console.error('获取题目信息失败:', res.message)
    }
  } catch (error) {
    console.error('请求错误:', error)
  }
}

const toPractice = (item: any) => {
  if (item.questionCount > 0) {
    ElMessageBox.confirm('是否继续上次答题', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal: false,
      closeOnPressEscape: false
    }).then(() => {
      router.push({
        name: 'confidentialExam',
        query: {
          id: item.id,
          state: 1
        }
      })
    }).catch(() => {
      router.push({ name: 'confidentialExam', query: { id: item.id } })
    })
  } else {
    ElMessage.warning('该分组暂无题库')
  }
}
onMounted(() => {
  fetchQuestionInfo()
})
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

.content {
  padding: rem(50) rem(30);
  min-height: calc(100vh - 92px);
}

.content-item {
  margin-bottom: rem(20);
}

.title {
  font-size: rem(35);
  font-weight: 500;
  color: #333;
  margin-bottom: rem(50);
}

.subtitle {
  font-size: rem(25);
  font-weight: 500;
  color: #333;
  margin-bottom: rem(20);
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex-wrap: wrap;
  gap: rem(40);
  width: 100%;
}

.card {
  display: flex;
  align-items: center;
  background-color: #f7f9ff;
  border-radius: rem(12);
  padding: rem(27) rem(40) rem(27) rem(110);
  flex: 1 1 calc(50% - rem(10));
  min-width: rem(300);
  box-shadow: 0 rem(2) rem(8) rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: url('@/assets/img/sj1.png') no-repeat;
  background-position: center;
  background-size: cover;
  color: #a8650b;
  cursor: pointer;

  &:hover {
    transform: translateY(rem(-10));
    box-shadow: 0 rem(4) rem(12) rgba(0, 0, 0, 0.15);
  }
}

.card-icon {
  width: rem(40);
  height: rem(40);
  background: linear-gradient(to right, #f4cc56, #ec9600);
  border-radius: rem(6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: rem(15);
  flex-shrink: 0;
}

.icon-text {
  color: white;
  font-size: rem(18);
  font-weight: bold;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: rem(25);
  font-weight: bold;
  line-height: 1.4;
}

.card-number {
  font-size: rem(25);
  // font-weight: 600;
  margin-left: auto;
  flex-shrink: 0;
}

// 响应式设计
@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;
    min-width: auto;
  }

  .grid-container {
    gap: rem(15);
  }
}
</style>
